<template>
	<div class="custom-layout">
		
		<div class="full">
			<div class="custom-panel">
				<div class="head">
					<div class="title">
						<span>API模型</span>
					</div>
					<div class="search-panel">
						<el-input
						  v-model="keywords"
						  placeholder="请输入名称"
						  class="input-with-select search-input"
						  @keydown="handleSearch"
						  style="width: 350px;margin-right: 10px;" 
						>
							<template #prepend>名称</template>
						</el-input>
						<el-button color="#626aef" @click.stop="load">查询</el-button>
						<el-button color="#080814" @click.stop="restSearch">重置</el-button>
						<el-button color="#6A68ED" :icon="Plus" @click.stop="editDialogRef.openDialog(null,'add')" v-hasPerm="['ue:thingmodel:add']">添加</el-button>
					</div>
				</div>
				
				<div class="body">
					<el-table
						ref="dataTableRef"
						v-loading="loading"
						:data="tableData"
						height="calc(100vh - 201px)"
						border
					>
					<el-table-column
					  label="名称"
					  align="left"
					  prop="name"
					/>
					
					<el-table-column
					  label="标识"
					  align="left"
					  prop="code"
					/>
					
					<el-table-column label="是否启用" align="center" width="100" prop="status">
					  <template #default="scope">
						<el-tag :type="scope.row.status == '1' ? 'success' : 'info'">{{
						  scope.row.status == '1' ? "启用" : "禁用"
						}}</el-tag>
					  </template>
					</el-table-column>
					
					<el-table-column
					  label="创建时间"
					  align="center"
					  prop="createTime"
					/>

					<el-table-column fixed="right" label="操作" width="220">
					  <template #default="scope">
						<el-button
						  type="primary"
						  size="small"
						  link
						  @click="editDialogRef.openDialog(scope.row,'edit')"
						  v-hasPerm="['ue:thingmodel:edit']"
						>
						  <i-ep-edit />编辑
						</el-button>
						
						<el-button
						  type="primary"
						  size="small"
						  link
						  @click="editFunDialogRef.openDialog(scope.row)"
						  v-hasPerm="['ue:thingmodel:fun']"
						>
						  <i-ep-Operation />功能
						</el-button>
						<el-button
						  type="primary"
						  size="small"
						  link
						  @click="handleDelete(scope.row.id)"
						  v-hasPerm="['ue:thingmodel:del']"
						>
						  <i-ep-delete />删除
						</el-button>
					  </template>
					</el-table-column>
					</el-table>
				</div>
				<div class="footer">
					<el-pagination
					  v-model:current-page="_cur"
					  v-model:page-size="_pageSize"
					  :page-sizes="[100, 200, 300, 400]"
					  layout="total, sizes, prev, pager, next, jumper"
					  :total="_total"
					  background 
					  @size-change="handleSizeChange"
					  @current-change="handleCurrentChange"
					/>
				</div>
			</div>
		</div>
		<EditDialog  ref="editDialogRef" @closeDialog="closed"></EditDialog>
		<EditFunDialog ref="editFunDialogRef" @closeDialog="closed"></EditFunDialog>
		
	</div>
</template>

<script setup lang="ts">
	import {
	  getThingmodelPage,deleteThingmodel
	} from "@/api/sys/thingmodel";
	import EditDialog from "./components/EditDialog.vue";
	import EditFunDialog from "./components/EditFunDialog.vue";
	
	import {
	  Plus
	} from '@element-plus/icons-vue' 
	
	const editDialogRef=ref();
	const editFunDialogRef=ref();
	const loading = ref(false);
	const keywords=ref('');
	let tableData=ref<any[]>([])
	
	const _cur=ref(1);
	const _total=ref(0);
	const _totalPage=ref(0);
	const _pageSize=ref(20);
	
	const handleCurrentChange=(cur:number)=>{
		_cur.value= cur
		load();
	}
	
	const handleSizeChange = (val: number) => {
	  _pageSize.value=val
	  load();
	}
	
	const handleSearch=(e:any)=>{
		if(e.keyCode == 13) {
			load();
		}
	}
	
	const restSearch=()=>{
		_cur.value=1;
		keywords.value="";
		load();
	}
	
	
	const load=()=>{
		loading.value=true;
		getThingmodelPage({
			keywords:keywords.value,
			source:'unreal',
			cur:_cur.value,
			limit:_pageSize.value
		})
		.then((res:any) => {
			const _data=res?.data
			_data.list.forEach((item:any) => {
			  item['url']=import.meta.env.VITE_APP_BASE_API+'/file/thumbnail/'+item?.id+"?"+ new Date().getTime()
			})
			_total.value=_data.totalRow
			_totalPage.value=_data.totalPage
			tableData.value= _data.list
		})
		.catch((e:any) => {
			console.error(e)
		})
		.finally(() => {
			loading.value=false;
		});
	}
	
	const handleDelete=(id:any)=>{
		ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
		  confirmButtonText: "确定",
		  cancelButtonText: "取消",
		  type: "warning",
		})
		.then(() => {
			loading.value=true;
			deleteThingmodel(id)
			.then(() => {
				ElMessage.success("成功");
				load();
			})
			.catch((e:any) => {
				console.error(e);
			})
			.finally(() => {
				loading.value=false;
			});
		})
		.catch(() => ElMessage.info("已取消删除"));
	}
	
	const closed=()=>{
		load();
	}
	onMounted(() => {
	  load();
	});
</script>
<style scoped>
	.search-panel{
		display: flex;
		align-items: center;
		align-content: center;
		flex-wrap: nowrap;
		flex-direction: row;
		padding-right: 6px;
		.left{
			flex: 0.7;
			background-color: transparent;
			display: flex;
			border: none;
		}
		.right{
			flex: 0.3;
			margin-left: 8px;
			background-color: transparent;
			text-align: right;
			border: none;
		}
	}

	.operate{
		height: 27px;
		display: flex;
		flex-wrap: nowrap;
		align-content: center;
		justify-content: center;
		align-items: center;
	}
	
	.footer{
		:deep(li.is-active) {
			background-color: #6c5dd3!important;
		}
	}
	
</style>


